<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>


    <!-- 折线图 -->
    <script>
        $(function () {
            let Xdata = [];
            let Ydata = [];
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('curve_show'));

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '日新增文章数',
                    left: 'center',
                    align: 'right'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新增文章'],
                    top: 40
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '新增文章',
                    data: Ydata,
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#ffe2be'
                        }, {
                            offset: 1,
                            color: '#fffced'
                        }])
                    },
                    itemStyle: {
                        color: '#ff8800'
                    },


                }]
            };
            // 获取绘图的数据
            $.ajax({
                url: 'http://localhost:8080/api/v1/admin/data/article',
                success: function (backData) {
                    for (let i = 0; i < backData.date.length; i++) {
                        Xdata.push(backData.date[i].date)
                        Ydata.push(backData.date[i].count)
                    };
                    option.xAxis.data = Xdata;
                    option.series.data = Ydata;
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            })
        })
    </script>

    <!-- 环形图 -->
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('pie_show'));

        option1 = {
            title: {
                left: 'center',
                text: '分类文章数量比',
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
                top: 30
            },
            color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
            series: [{
                name: '分类名称',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [{
                        value: 335,
                        name: '爱生活'
                    },
                    {
                        value: 310,
                        name: '趣美味'
                    },
                    {
                        value: 234,
                        name: '爱旅行'
                    },
                    {
                        value: 135,
                        name: '爱电影'
                    },
                    {
                        value: 548,
                        name: '爱游泳'
                    }
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
    </script>
    <!-- 柱状图 -->
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('column_show'));

        option2 = {
            title: {
                left: 'center',
                text: '分类访问量',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                },

            },
            legend: {
                data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
                top: 30
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['一月', '二月', '三月', '四月']
            }],
            yAxis: [{
                type: 'value'
            }],
            color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
            series: [{
                    name: '爱生活',
                    type: 'bar',
                    data: [320, 332, 301, 334]
                },
                {
                    name: '趣美味',
                    type: 'bar',
                    data: [220, 132, 101, 134]
                },
                {
                    name: '爱旅行',
                    type: 'bar',
                    data: [220, 182, 191, 234]
                },
                {
                    name: '爱电影',
                    type: 'bar',
                    data: [150, 232, 201, 154]
                },
                {
                    name: '爱游泳',
                    type: 'bar',
                    data: [262, 118, 364, 426],
                },

            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
    </script>

    <script>
        // 一:获取统计数据
        $(function () {
            $.ajax({
                url: 'http://localhost:8080/api/v1/admin/data/info',
                success: function (backData) {
                    // console.log(backData);
                    $('.spannel_list .spannel:eq(0) em').text(backData.totalArticle)
                    $('.spannel_list .spannel:eq(1) em').text(backData.dayArticle)
                    $('.spannel_list .spannel:eq(2) em').text(backData.totalComment)
                    $('.spannel_list .spannel:eq(3) em').text(backData.dayComment)



                }
            })
        })
    </script>
</body>

</html>